<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>

<table class="layui-hide" id="user-table"></table>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
</script>

<script type="text/html" id="column-toolbar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

</body>
<script charset="UTF-8" th:src="@{/jquery.min.js}"></script>
<script charset="utf-8" th:src="@{/layui/layui.js}"></script>
<script charset="utf-8" th:src="@{/common.js}"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;

        table.render({
            elem: '#user-table'  //指定原始表格元素选择器（推荐id选择器）
            , url: '/user/list'
            //, height: 400 //容器高度
            , toolbar: '#toolbar' //开启表格头部工具栏区域 //指向自定义工具栏模板选择器
            //, page: true //开启分页
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页

            }
            , cols: [
                [
                    {field: 'id', title: 'ID', sort: true}
                    , {field: 'username', title: '用户名'}
                    , {field: 'email', title: '邮箱'}
                    , {field: 'age', title: '年龄'}
                    , {title: '操作', align: 'center', toolbar: '#column-toolbar'}  //toolbar - 绑定工具条模板 在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生
                ]
            ]
        });

        table.on('toolbar', function (obj) {
            var data = obj.data;
            var event = obj.event;

            if (event === 'add') {
                layer.open({
                    type: 2,  //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    area: ['500px', '500px'],
                    fix: false,
                    maxmin: true,  //最大最小化
                    shadeClose: true, //是否点击遮罩关闭
                    shade: 0.4,  //遮罩,弹层外区域。默认是0.3透明度的黑色背景
                    title: "用户添加",
                    content: "/user/add",
                    end: function () {
                        table.reload('user-table');
                    }
                });
            }
        });

        // 行点击事件
        table.on('tool', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (event === 'del') {
                $.ajax({
                    type: "DELETE",
                    url: '/user/delete/' + data.id,
                    dataType: "json",
                    success: function(result){
                        handlerResult(result, deleteDone);
                    }
                });
            }
        });

        function deleteDone(data) {
            parent.layer.msg("删除成功");
            table.reload('user-table');
        }
    });
</script>

</html>